<template>
    <div class="queryWrong-box">
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/?type=1' }">首页</el-breadcrumb-item>
                <!-- <el-breadcrumb-item :to="{ path: '/?type=1' }">科目{{ types == 1 ? '一' : '四' }}</el-breadcrumb-item> -->
                <el-breadcrumb-item>错题收藏</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="'错题集（' + tab1Name + '）'" name="first">
                    <div>
                        <div v-if="listData1.length == 0">您暂时还没有错题数据咯</div>
                        <div class="item" v-for="(item,index) in listData1" :key="index" @click="lookDetail('error',item.type)">
                            <div>{{ item.type_name }}</div>
                            <div style="color: #999;">{{ item.type_count + '    >' }}</div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'收藏集（' + tab2Name +'）'" name="second">
                    <div>
                        <div v-if="listData2.length == 0">您暂时还没有收藏数据咯</div>
                        <div class="item" v-for="(item,index) in listData2" :key="index" @click="lookDetail('collection',item.type)">
                            <div>{{ item.type_name }}</div>
                            <div style="color: #999;">{{ item.type_count + '    >' }}</div></div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import { getErrType,getCollectionType } from '@/api/user.js'
export default {
    data() {
        return {
            types: 1,
            activeName: 'first',
            tab1Name:0,
            tab2Name:0,
            listData1:[],
            listData2:[],
        }
    },
    mounted() {
        this.types = this.$route.query.type
        this.init()
    },
    methods: {
        // 查看收藏/错题
			lookDetail(model,type){
                this.$router.push({
                    path:'/redo_topic',
                    query:{
                        model,
                        type
                    }
                })
			},
        init() { 
            let that = this
            getErrType().then(res=>{
                let data = res.data
                if(data.length == 0){
                    that.tab1Name = 0
                }else{
                    that.tab1Name = data.length
                    that.listData1 = data
                }
            })
            getCollectionType().then(res=>{
                console.log(88,res)
                let data = res.data
                if(data.length == 0){
                    that.tab2Name = 0
                }else{
                    that.tab2Name = data.length
                    that.listData2 = data
                }
            })
        },
        handleClick() {}
    },
}
</script>
<style scoped lang="scss">
.queryWrong-box {
    padding: 1.5% 12.5%;
    background-color: #fff;
    .item{
        border-bottom: #E6E6E6 1px solid;
        display: flex;
        justify-content: space-between;
        line-height: 45px;
        cursor: pointer;
    }
}
</style>